<template>
  <div class="index">
    <div class="policy-mian">
        <div class="policy-mian-top">
            <div class="title">企业认证</div>
        </div>
        <div class="wrap">
            <div class="from">
                <div class="from-div flex-ali">
                    <div class="labei flex-ali">
                        <div class="icon"></div>
                        <div class="p">注册资金：</div>
                    </div>
                    <el-input class="input" v-model="capital" placeholder="注册资金"></el-input> 万
                    <!-- <input name="capital" type="number" placeholder="注册资金"/>  -->
                </div>

                <div class="from-div flex-ali">
                    <div class="labei flex-ali">
                        <div class="icon"></div>
                        <div class="p">成立时间：</div>
                    </div>
                    <el-date-picker
                    v-model="datec"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </div>

                <div class="from-div flex">
                    <div class="labei flex">
                        <div class="icon"></div>
                        <div class="p">营业执照：</div>
                    </div>
                    <div class="upload">
                        <div class="upload-p">
                            <p style="padding-bottom: 6px;font-size: 16px;">营业执照上传</p>
                            <div class="upload-div flex-ali">
                                <!-- <div class="file"><div class="bj"></div><input type="file" name="file" /></div> -->
                                <el-upload
                                class="avatar-uploader"
                                action="http://localhost/api-file/files-anon"
                                :headers=headers
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <div class="upload-div-p"><p>不大于800KB</p><p>支持jpg/bmp/png格式</p></div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
           <div class="btn" @click="submit()">提交</div>
        </div>
    </div>
  </div>
</template>
<script>
import '@/assets/styles/policy-public.scss' // iboot css
import {submitBusinessLicense} from '@/api/service/service'
import { getToken } from '@/utils/auth'
import { Notification, MessageBox, Message } from 'element-ui'
export default {
  name: "index",
  data() {
    return {
        imageUrl: '',
        headers:{
            Authorization:'Bearer '+getToken()
        },
        capital:'',
        datec:"",
        aid:"",
        req:{},
        cateId:"",
        questionItemIds:""
    }
  },
  created() {
    this.questionItemIds=this.getQueryString("questionItemIds");
    this.cateId=this.getQueryString("cateId");
  },
  mounted(){
      //this.submitBusinessLicenseApi()
  },
  methods:{
      handleAvatarSuccess(res, file) {
          //this.req.attachmentId = res.id;
          this.aid = res.id;
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (isJPG || isPNG || isBMP) {
          
        }else{
            this.$message.error('上传头像图片只能是 jpg/gif/bmp/png格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG || isPNG || isBMP || isLt2M;
      },
      submitBusinessLicenseApi(){
        submitBusinessLicense(this.req).then(res=>{
            if(res.resp_msg == "SUCCESS"){
                Message({
                    message: "提交成功",
                    type: 'success'
                })
                this.$router.push({path:'/policy/matching?questionItemIds='+this.questionItemIds+'&cateId='+this.cateId})
            }
        })
      },
      submit(){
          if(!this.capital){
            Message({
                message: "请填写注册资金",
                type: 'error'
            })
            return;
          }
          if(!this.datec){
            Message({
                message: "请选择日期",
                type: 'error'
            })
            return;
          }
          if(!this.aid){
            Message({
                message: "请上传营业执照",
                type: 'error'
            })
            return;
          }
          // req:{
        //     attachmentId:"cfe8f0d3c9af417cb01b353b7fd1e90e",
        //     validTime:"2020-10-13 00:00:00",
        //     registerCapital:100
        // }
         this.req = {
             attachmentId:this.aid,
             registerCapital:this.renderTime(this.datec)+' 00:00:00',
             registerCapital:this.capital
         }
        this.submitBusinessLicenseApi()

      },
      renderTime(date) {
        var dateee = new Date(date)
        return dateee.getFullYear()+'-'+(dateee.getMonth()+1)+'-'+dateee.getDate()
      },
      getQueryString (name) { 
        let reg = `(^|&)${name}=([^&]*)(&|$)`
        let r = window.location.search.substr(1).match(reg); 
        if (r != null) return unescape(r[2]); return null; 
      }
  }
}
</script>
<style scoped>
.from {
    display: block;
    width: 100%;
    box-shadow: 0px 2px 5px 1px rgba(43, 111, 141, 0.18);
    padding: 20px 14px;
    background: #fff;
    border-radius: 6px;
}
.from .from-div {
    padding: 15px 0;
}
.from .from-div .labei{
    width: 120px;
    position: relative;
}
.from .from-div .labei .icon{
    width: 25px;
    height: 25px;
    margin-right: 10px;
    background: #3588A4;
    border-radius: 50%;
}
.from .from-div .p{
    flex: 1;
    line-height: 25px;
    
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}
.from .from-div .input{
    width: 220px;
    height: 32px;
    font-size: 16px;
    text-align: center;
    margin-right: 6px;
    box-sizing: border-box;
}
.from .from-div .p1{
    padding: 0 20px;
}
.from .from-div .boa {
    padding-left: 50px;
}
.from .from-div .boa .radioa{
    width: 12px;
    height: 12px;
    border: 1px solid #BBBBBB;
}
.from .from-div .boa .p2{
    color: #333333;
    font-size: 16px;
    line-height: 20px;
    padding-left: 10px;
}
.from .from-div .file{
    width: 200px;
    height: 140px;
    position: relative;
}
.from .from-div .file input{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    opacity: 0;
}
.from .from-div .file .bj{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .2);
    z-index: 2;
}
.from .from-div .upload .upload-p p{
    margin: 0;
    line-height: 25px;
}
.from .from-div .upload .upload-p .upload-div-p{
    color: #999;
    font-size: 14px;
    line-height: 21px;
    padding-left: 26px;
}
.btn{
    width: 322px;
    height: 42px;
    background: #3EACC4;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    line-height: 42px;
    margin: 60px auto;
}
.avatar-uploader{
    width: 120px;
    height: 100px;
    line-height: 98px;
    text-align: center;
    font-size: 60px;
    border: 1px solid #ccc;
}
.avatar-uploader img{
    width: 120px;
    height: 100px;
}
input::-webkit-input-placeholder { 
/* WebKit browsers */ 
color: #BBBBBB; 
} 
input:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */ 
color: #BBBBBB; 
} 
input::-moz-placeholder { 
/* Mozilla Firefox 19+ */ 
color: #BBBBBB; 
} 
input:-ms-input-placeholder { 
/* Internet Explorer 10+ */ 
color: #BBBBBB; 
}
</style>